<template>
  <div class="inbound-container">
    <el-form :inline="true" label-width="120px" :model="form">
      <el-form-item :label="translate('计划描述') + '：'">
        <div class="item">{{ form.PlanDescription }}</div>
      </el-form-item>
      <el-form-item :label="translate('计划类型') + '：'">
        <div class="item">{{ form.PlanType }}</div>
      </el-form-item>
      <el-form-item :label="translate('计划类别') + '：'">
        <div class="item">{{ form.PlanCategory }}</div>
      </el-form-item>
      <el-form-item :label="translate('计划来源') + '：'">
        <div class="item">
          {{ form.PlanSource }}
        </div>
      </el-form-item>
      <el-form-item :label="translate('公司') + '：'">
        <div class="item">{{ form.ComName }}</div>
      </el-form-item>
      <el-form-item :label="translate('部门') + '：'">
        <div class="item">{{ form.DemandDept }}</div>
      </el-form-item>
      <el-form-item :label="translate('工厂') + '：'">
        <div class="item">{{ form.FactoryName }}</div>
      </el-form-item>
      <el-form-item :label="translate('移动类型') + '：'">
        <div class="item">
          {{ form.MovementType }}
        </div>
      </el-form-item>
      <el-form-item :label="translate('移动类型描述') + '：'">
        <div class="item">{{ form.MovementDescription }}</div>
      </el-form-item>
      <el-form-item :label="translate('是否紧急') + '：'">
        <div class="item">{{ form.IsUrgent‌ }}</div>
      </el-form-item>
      <el-form-item :label="translate('紧急理由') + '：'">
        <div class="item">{{ form.Urgent‌Reason }}</div>
      </el-form-item>
      <el-form-item :label="translate('库存类') + '：'">
        <div class="item">{{ form.StockCategory }}</div>
      </el-form-item>
      <el-form-item :label="translate('无码计划') + '：'">
        <div>{{ form.NoCodePlan }}</div>
      </el-form-item>
      <el-form-item :label="translate('科目分配类别') + '：'">
        <div>{{ form.CourseCategory }}</div>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" border :data="tableData"
        show-summary
        :summary-method="totalOutYear">
      <el-table-column label="序号" type="index" width="55" />
      <el-table-column :label="translate('物料编码')" prop="ItemCode" />
      <el-table-column :label="translate('物料描述')" prop="ItemDescription" />
      <el-table-column :label="translate('物料组')" prop="ItemGroupCode" />
      <el-table-column :label="translate('进口物资')" prop="ImportItem" />
      <el-table-column :label="translate('基础计量单位')" prop="BaseUnit" />
      <el-table-column :label="translate('需求数量')" prop="DemandQty" />
      <el-table-column
        :label="translate('需求日期')"
        min-width="100"
        prop="DemandDate"
      />
      <el-table-column :label="translate('参考单价')" prop="UnitPrice" />
      <el-table-column :label="translate('采购组')" prop="PurchaseGroup" />
      <el-table-column :label="translate('库存地点')" prop="StorageLocation" />
      <el-table-column :label="translate('成本中心')" prop="CostCenter" />
      <el-table-column :label="translate('内部订单')" min-width="80" prop="InnerBill" />
      <el-table-column :label="translate('送货地址')" prop="SendAdress" />
      <el-table-column :label="translate('备注')" prop="Remark" />
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="pageNo"
        :layout="'total, sizes, prev, pager, next, jumper'"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentchiled"
        @size-change="handleSizechiled"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { planDetail } from '@/api/form'
  import { translate } from '@/i18n'
  const props = defineProps<{
    id: string,
  }>()
  const form: any = ref({})
  const tableData: any = ref([])
  const id = props.id || ''
  const pageNo = ref(1)
  const pageSize = ref(10)
  const total = ref(0)
  const childData: any = ref([])
  const getTableData = async () => {
    const params = {
      pageNo: 1,
      pageSize: 1000,
      total: 0,
      tableName: '',
      sort: '',
      order: '',
      wheres: '',
      export: true,
      value: id,
    }
    const data = await planDetail(params)
    if(data.rows && data.rows.length>0) {
      data.rows.map((item,index) =>{
        item.childList = []
        if(data.extra && data.extra.length>0){
          data.extra.map(item1 => {
            if(item.ItemCode === item1.ItemCode) {
              item.childList.push(item1)
            }
          })
        }
      })
    }
    tableData.value = data.rows || []
    form.value = data.master || {}
    childData.value = data.extra || []

  }
  const handleCurrentchiled = (val: number) => {
    pageNo.value = val
  }
  const handleSizechiled = (val: number) => {
    pageSize.value = val
  }
  const totalOutYear = (param) => {
      const { columns, data } = param

      const sums = []

      columns.forEach((column, index) => {

        if (index === 0) {

          sums[index] = "合计"

          return

        }
        if (index === 1 || index === 2 || index === 3 || index === 4 || index === 5 || index === 7 ||
            index === 8 || index === 9 || index === 10 || index === 11 ||index === 12||index === 13||index === 14) {

          sums[index] = ""

          return

          }

        const values = data.map(item => Number(item[column.property]))

        if (
          column.property != "BatchNo" && column.property != "WHUnit" &&
          column.property != "StorageLocation" && column.property != "WSCode" &&
          column.property != "ItemCate" && column.property != "ItemCode" &&
          column.property != "Owner" && column.property != "ItemSpec"
        ) {

          sums[index] = values.reduce((prev, curr) => {

            const value = Number(curr);
            if (!isNaN(value)) {
              const tt = prev*1 + curr*1
              if(Number.isInteger(tt)) {
                return tt.toString()
              }else {
                console.log(tt)
                return tt.toFixed(2)
              }


            } else {

              return prev

            }

          }, 0)

          sums[index]

        }

      })

      return sums

      }

  onMounted(() => {
    getTableData()
  })
</script>

<style lang="scss" scoped>
  .inbound-container {
    .item {
      width: 160px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .colored {
      color: red;
    }
  }
</style>
